<template>
  <div class="video-player-wrapper">
    <div v-if="player && closeSwitch" class="video-top">
      <span @click="close">x</span>
    </div>
    <div class="video-boxer">
      <div
        ref="player"
        crossorigin="anonymous"
        style="width: 100%; height: 100%"
      ></div>
    </div>
    <div class="video-cover" @click="handle"></div>
  </div>
</template>
<script>
import Clappr from 'clappr'
export default {
  name: 'VideoPlayer',
  props: {
    src: {
      type: String,
      default: ''
    },
    closeSwitch: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      player: null,
      device: null // 缓存设备数据
    }
  },

  computed: {
    //...mapGetters(['camera'])
  },
  watch: {
    src(newVal, oldVal) {
      if (newVal) {
        this.player && this.player.destroy()
        this.player = null
        this.init()
      }
    }
  },
  mounted() {
    this.init()
  },
  destroyed() {
    this.close()
  },
  methods: {
    init() {
      console.log('videoplayer src', this.src)
      if (!this.src) {
        return
      }
      // this.device = JSON.parse(JSON.stringify(this.camera))
      this.player = new Clappr.Player({
        parent: this.$refs.player,
        // source: 'http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8',
        source: this.src,
        width: '100%',
        height: '100%',
        events: {
          onStop: () => {
            // this.$emit('onStop');
            // this.$store.dispatch('monitor/cleanCamera');
          }
        }
      })
      this.player.play()
    },
    handle() {
      if (!this.player) return !1
      this.player.play()
      this.$emit('onPlay')
      //this.$store.dispatch('monitor/getCamera', this.device)
      // console.log(this.device);
      // console.log(this.camera);
    },
    close() {
      if (this.player) {
        this.player.destroy()
        this.player = null
        this.$emit('closed')
      }
    },
    snapshot() {
      // console.log('start snapshot')
      // html2canvas(this.$refs.player, {
      //   // allowTaint: false,
      //   useCORS: true
      // }).then(canvas => {
      //   console.log('截图', canvas.toDataURL())
      //   return canvas.toDataURL()
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.video-player-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  &:hover {
    .video-top {
      display: flex;
      justify-content: flex-end;
    }
  }
  .video-top {
    position: absolute;
    right: 0px;
    width: 100%;
    height: 30px;
    z-index: 19999;
    background-color: transparent;
    display: none;
    .anticon {
      color: #fff;
      &:hover {
        color: #1890ff;
        cursor: pointer;
      }
    }
  }
  .video-boxer {
    width: 100%;
    height: 100%;
    background-color: #000;
    position: relative;
  }
  .video-cover {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 45px;
    cursor: pointer;
  }
}
</style>
